<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>游戏选单</title>
    <link rel="shotcut icon" href="/f/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/f/bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/f/marketing.css?4">
    <script src="/f/vue.js"></script>
    <script type="text/javascript" src="https://1up.oss-cn-hangzhou.aliyuncs.com/d/gametable.js"></script>
</head>

<body>
<div id="app">
    <nav class="navbar navbar-expand-sm home-menu">
        <a class="navbar-brand" href="/">
            <img src="/f/logo.png" class="d-inline-block align-center" height="40px">
            <span style="color:white">欢迎选择游戏</span>
        </a>
    </nav>

    <div class="main" v-if="page==2">
        <div>
        游戏采购单信息 <a href="javascript:void(0)" @click="page=1">返回</a>
        </div>
        <div>
            <button class="btn btn-primary" @click="saveOrder">复制</button>
        </div>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th scope="col">序号</th>
                <th scope="col">名称</th>
                <th scope="col">类型</th>
                <th scope="col">容量</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(g, index) in games" v-if="g.added" @click="addGame(g)">
                <td>{{ g.no }}</td>
                <td>{{ g.name }}</td>
                <td>{{ g.genre }}</td>
                <td>{{ g.size }}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="main" v-if="page==1">
        <nav class="nav1 sticky">
            <table style="min-width: 130px; width:100%">
                <tr>
                    <td class="td1">游戏硬盘:</td>
                    <td class="red">
                        内置
                    </td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="td1">卡片总容量:</td>
                    <td class="red">
                        {{ cap }}G
                    </td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="td1">已选游戏容量:</td>
                    <td class="red">
                        {{ volume }}G
                    </td>
                    <td>
                        游戏总数
                    </td>
                    <td class="red">{{ selects }}</td>
                </tr>
                <tr>
                    <td class="td1">卡片剩余容量:</td>
                    <td class="red">
                        {{ balance }}G
                    </td>
                    <td></td>
                    <td></td>
                </tr>
            </table>

            <div class="clearfix">
                <div class="float-right">
                    按步骤选择游戏后点击 <button class="btn btn-danger btn-lgn" @click="submit">&nbsp;确定&nbsp;</button>
                </div>
            </div>

        </nav>

        <div class="tip">
            温馨提示：选择好游戏以后请点击上方确定按钮，再点击复制直接发送给客服，自选安装游戏需要一定时间，请耐心等待！ 
        </div>

        <div class="stage">
            <h4>第一步: 请选择卡片类型 [单选]</h4>
            <div>安装版</div>
            <table class="table table-bordered">
                <tr>
                    <td @click="setcap(1, '500G', 465)">
                        <input type="radio" :checked="cap==465">500G=465G可用</input>
                    </td>
                    <td @click="setcap(1, '1T', 931)">
                        <input type="radio" :checked="cap==931">1T=931G用</input>
                    </td>
                </tr>
                <tr>
                    <td @click="setcap(1, '2T', 1860)">
                        <input type="radio" :checked="cap==1860">2T=1860G可用</input>
                    </td>
                    <td @click="setcap(1, '3T', 2790)">
                        <input type="radio" :checked="cap==2790">3T=2790G可用</input>
                    </td>
                </tr>
                <tr>
                    <td @click="setcap(1, '4T', 3720)">
                        <input type="radio" :checked="cap==3720">4T=3720G可用</input>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>

            <!--div>免安装版</div>
            <table class="table table-bordered">
                <tr>
                    <td @click="setcap(2, '500G', 430)">
                        <input type="radio" :checked="cap==430">500G=430G可用</input>
                    </td>
                    <td @click="setcap(2, '1T', 860)">
                        <input type="radio" :checked="cap==860">1T=860G用</input>
                    </td>
                </tr>
                <tr>
                    <td @click="setcap(2, '2T', 1720)">
                        <input type="radio" :checked="cap==1720">2T=1720G可用</input>
                    </td>
                    <td @click="setcap(2, '3T', 2580)">
                        <input type="radio" :checked="cap==2580">3T=2580G可用</input>
                    </td>
                </tr>
                <tr>
                    <td @click="setcap(2, '4T', 3450)">
                        <input type="radio" :checked="cap==3450">4T=3450G可用</input>
                    </td>
                    <td>
                    </td>
                </tr>
            </table-->
        </div>

        <div class="stage">
            <h4>第二步: 请选择游戏 [多选]</h4>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th scope="col">选择</th>
                    <th scope="col">字母</th>
                    <th scope="col">名称</th>
                    <th scope="col">容量</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(g, index) in games" v-if="searchFilter(g)" @click="addGame(g)" :class="{ active:g.added }">
                    <td>
                        <input type="checkbox" :checked="g.added">
                    </td>
                    <td>{{ g.letter }}</td>
                    <td :class="{ activebold:g.added }">{{ g.name }}</td>
                    <td>{{ g.size }}</td>
                </tr>
                </tbody>
            </table>
        </div>

        <div >
            <p align="center">© 2021 1uplabs</p>
        </div>

        <footer class="footer">
            <input type="text" v-model="keyword" placeholder="搜索游戏名称或拼音">
            <a v-for="a in alphabet" href="javascript:void(0)" @click="keyword=a">{{ a }} </a>
        </footer>
    </div>
</div>

<script>
var app = new Vue({
    el: '#app',
    data: {
        cap: 0, // 实际总容量
        cardt: 0, // 1安装版 2免安装版
        cap1: "", // 卡片总容量
        games: [], // 游戏列表
        keyword: "", // 搜索关键词
        alphabet: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M','N', 'O', 'P',
            'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'],
        page: 1 // 1主页面,2订单页面
    },
    filters: {
    },
    computed: {
        balance: function() {
            return this.cap - this.volume;
        },
        // 已选容量
        volume: function() {
            var n = 0;
            for (it of this.games) {
                if (it.added) {
                    n += it.size;
                }
            }
            return n;
        },
        // 已选游戏总数
        selects: function() {
            return this.games.filter(g => g.added).length
        },
    },
    created() {
        // this.games = [
        //     {no:1, name:"暗黑破坏神3终极邪恶版（英）", genre:"角色扮演", size:47, added:false},
        //     {no:2, name:"暴雨折纸杀手v1.00", genre:"电影交互冒险", size:25, added:false},
        //     {no:3, name:"彩虹六号围攻v1.32", genre:"射击", size:31, added:false},
        //     {no:4, name:"刺客信条起源v1.41", genre:"动作", size:70, added:false},
        //     {no:5, name:"古墓丽影9：最终版（系统繁体）v1.00", genre:"动作", size:13, added:false},
        // ];
        this.games = gametable;
    },
    methods: {
        setcap: function(ct, cap1, n) {
            if (n < this.volume) {
                alert("选择的卡片类型容量小于游戏总容量，可以选择更大的卡片类型，或减少游戏的选择");
                return;
            }
            app.cardt = ct;
            app.cap = n;
            app.cap1 = cap1;
        },
        searchFilter: function(g) {
            var kw = this.keyword.toLowerCase();
            if (kw != "") {
                // 输入单字母, 用首字母搜索
                if (kw.length == 1 && /[a-z]/.test(kw)) {
                    return g.letter == this.keyword || g.pinyin.startsWith(kw);
                }
                // 其他用饱含查找
                if (g.name.indexOf(kw)<0 && g.pinyin.indexOf(kw)<0) {
                    return false
                }
            }
            return true
        },
        addGame: function(g) {
            if (g.added) {
                g.added = false
            } else {
                console.log("vol:", this.volume, g.size, this.volume+g.size, this.cap)
                if (this.volume + g.size > this.cap) {
                    alert("亲，您选择的游戏容量已超标，请根据硬盘容量进行选择哦！");
                    return
                } 
                g.added = true
            }
        },
        submit: function() {
            if (this.cap <= 0 || this.selects <= 0) {
                alert("请先按照第一步，第二步选择卡片类型及游戏");
                return;
            }
            this.page = 2;
        },
        saveOrder: function() {
            var text = "";
            for (g of this.games) {
                if (g.added) {
                    text += `${g.name}\n`;
                }
            }
            text += "\n";
            if (this.cardt == 1) {
                text += `${this.cap1}安装版\n`;
            } else if (this.cardt == 2) {
                text += `${this.cap1}免安装版\n`;
            }
            text += `共: ${this.volume}G\n`;
            console.log(text);
            copyToClip(text);
            alert("复制成功, 不要复制错哟!");
        },
    }
});

/**
 * 复制内容到粘贴板
 * content : 需要复制的内容
 * message : 复制完后的提示，不传则默认提示"复制成功"
 */
function copyToClip(content) {
    var aux = document.createElement("textarea"); 
    //aux.setAttribute("value", content); 
    aux.value = content;
    document.body.appendChild(aux); 
    aux.select();
    document.execCommand("copy"); 
    document.body.removeChild(aux);
}
//————————————————
//版权声明：本文为CSDN博主「zyqok」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
//原文链接：https://blog.csdn.net/sunnyzyq/article/details/85065022

</script>
</body>
</html>